<template>
	<div class="contest" v-if="contest">
		<div class="title">
			<h2>{{ contest.name }}</h2>
			<p v-html="contest.description"></p>
		</div>

		<div class="content">
			<span class="item">
				{{ $t('startTime') }}:
				<span class="startTime">{{ contest.beginTime }}</span>
			</span>

			<span class="item">
				{{ $t('stopTime') }}:
				<span class="stopTime">{{ contest.endTime }}</span>
			</span>

			<span class="item">
				{{ $t('currentTime') }}:
				<span class="currentTime">{{ currentTimeStr }}</span>
			</span>

			<span class="item">
				{{ $t('status') }}:
				<span :style="'color:' + contest.statusColor">
					{{ $t(contest.statusName) }}
				</span>
			</span>
		</div>
	</div>


	<div class="contest-table">
		<table class="table table-hover">
			<thead>
				<tr>
					<th>{{ $t('status') }}</th>
					<th>{{ $t('identifier') }}</th>
					<th>{{ $t('title') }}</th>
					<th>{{ $t('source') }}</th>
					<th>{{ $t('accepted') }}</th>
					<th>{{ $t('submit') }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in problems" :key="item.id" @click="toProblemPage(item.id)"
					@contextmenu.prevent="toProblemPage(item.id, true)">
					<td>
						<span class="fa fa-check c-green" v-if="item.solvedByUser"></span>
					</td>
					<td class="link-color">
						{{ item.identifierString }}
					</td>
					<td class="link-color">{{ item.name }}</td>
					<td>{{ item.source }}</td>
					<td>{{ item.accepted }}</td>
					<td>{{ item.submit }}</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script type="module">
import { ContestService, ProblemService, Router } from '@/common/common.object'

export default {
	inject: ['contest'],
	data() {
		return {
			solvedProblems: null,
			contestProblems: null,

			currentTimeStr: null,
		};
	},
	created() {
		const titleTemplate = contest => `{{nav.contest}} - ${contest.name}`
		
		this.$changeTitle(titleTemplate(this.contest));

		ContestService.getProblems(this.contest.id)
			.then(result => {
				this.contestProblems = ProblemService.processesWithoutFreeze(result);
			});


		ContestService.getSolvedProblems(this.contest.id)
			.then(result => {
				this.solvedProblems = result.solvedList || null;
			}).catch(error => { });
	},
	mounted() {
		((currentTime = new Date()) => {
			const DATE_FMT = "yyyy-MM-dd hh:mm:ss";
			this.currentTimeStr = currentTime.format(DATE_FMT);

			setInterval(() => {
				currentTime.setSeconds(currentTime.getSeconds() + 1);
				this.currentTimeStr = currentTime.format(DATE_FMT);
			}, 1000);
		})();
	},
	computed: {
		problems() {
			if (!this.contestProblems
				|| !this.solvedProblems) {
				return this.contestProblems;
			}


			for (let item of this.contestProblems) {
				/* item.id 为string，而id为int，暂且如此 */
				for (let id of this.solvedProblems) {
					if (id == item.id) {
						item.solvedByUserService = true;
					}
				}
			}

			return this.contestProblems;
		}
	},
	methods: {
		toProblemPage(id, onNewPage = false) {
			let url = Router.page.contest.problem(this.contest.id, id);
			this.$toPage(url, onNewPage);
		},
	}
}
</script>

<style scope>
table>tbody>tr {
	cursor: pointer;
}

table>thead>tr>th {
	border-top: none !important;
}


.contest>.title {
	margin-bottom: 10px;
	padding: 30px 60px;
	background-color: #eee;

	border-radius: 6px;
}

.contest>.title>h2 {
	margin-top: 20px;
	margin-bottom: 10px;
}

.contest>.title>p {
	margin-bottom: 15px;
	font-size: 21px;
	font-weight: 200;
}



.contest>.content {
	padding: 15px;
	margin-bottom: 20px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}


.contest>.content>.item {
	padding-right: 24px;
}


.contest>.content>.item>.startTime,
.contest>.content>.item>.stopTime {
	color: purple;
}

.contest>.content>.item>.currentTime {
	color: #1E9FFF;
}
</style>
